<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全部歌手</title>
    <style>
        .color{
            background-color: #bfa;
        }
        .list {
            display: flex;
            flex-wrap: wrap;
        }
        .list .item{
            margin:3px
        }
        .list .item img {
            width: 150px;
            height: 150px;
            object-fit: cover;
        }
        .filter button{
            margin:5px
        }
    </style>
</head>
<body>
    <div id="all-singers">
        <div class="top">
           <h1>全部歌手</h1>
        </div>
        <div class="filter">
            分类：
            <button
                v-for="item of singerData"
                @click="filter(item.val)"
                :class="{color:item.val===butVal}"
            >{{item.text}}</button>
        </div>
        <div class="list">
            <div v-for="item of singerArr" class="item">
                <img :src="item.picUrl" :alt="item.name">
                <p>{{ item.name }}</p>
            </div>
        </div>
        <button
            @click="loadMore"
        >加载更多</button>
    </div>
    <script src="vue.js"></script>
    <script src="all-singers.js"></script>
</body>
</html>